<script setup lang="ts">
defineProps<{
  title?: string;
}>();
</script>

<template>
  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <div class="mb-4 flex items-center justify-between">
      <slot name="title">
        <h4 class="">
          {{ $props.title }}
        </h4>
      </slot>
      <div class="ml-auto flex gap-3">
        <slot name="action" />
      </div>
    </div>

    <slot />
  </div>
</template>

<style scoped lang="scss"></style>
